<template>
  <div class="commonContainer">
		<div class="header">
			<minMenu v-model="menuActive" :structure="menuStructure" jump="replace" inline />
		</div>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" :key="$route.fullPath"  v-if="$route.meta.keepAlive"/>
      </keep-alive>
      <component :is="Component" :key="$route.fullPath"  v-if="!$route.meta.keepAlive"/>
    </router-view>
  </div>
</template>
<script setup>
import minMenu from '@/components/common/minMenu.vue'
import { ref } from 'vue'

const menuActive = ref('开发项目')
const menuStructure = [
  {
    path: '/teacher/student/development',
    label: '开发项目',
  },
  {
    path: '/teacher/student/learn',
    label: '学习项目',
  },
]
</script>
<style lang="scss" scoped>
.commonContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  background: #ffffff;
  box-shadow: 0px 3px 10px 0px #e3e2ff;
  border-radius: 10px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    padding: 8px 24px 0 24px;
  }
}
</style>
